<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul class="list"></ul>
    <script>
        console.log(window.document.createDocumentFragment);

        // 需求：要求在页面中创建100000个li,li里面的内容是这是第xx个元素
        /* var parent = document.querySelector('.list');
        for(var i=0; i<500000;i++){
            // 创建li标签
            var li = document.createElement('li');
            // 创建标签内部的文本
            var text = document.createTextNode(+i);
            // 把创建的文本加入到li当中
            li.appendChild(text);

            // 将创建的子元素加入到父元素当中
            parent.appendChild(li);
            
            // 这个效果 反复的操作DOM，不断进行重排重绘回流，浪费性能 效率低 页面卡死

        } */
        // fragment
        var parent = document.querySelector('.list');
        // fragment 把所有的li都加入到虚拟元素内部，形成<fragment><li></li> 1000000</fragment>
        // 再将虚拟元素加入到ul当中   操作DOM就操作了1次
        var frag = document.createDocumentFragment();
        for (var i = 0; i < 500000; i++) {
            var li = document.createElement('li');
            var text = document.createTextNode(+i);
            li.appendChild(text);
            frag.appendChild(li);
        }
        parent.appendChild(frag);


        //   在vue3的组件当中写时不需要根标签，是因为在内部插入了Fragment（片段）
        //   Fragment是一个虚拟元素

        //   使用fragment虚拟元素的好处：减少了标签层级 减小内存占用

        //   fragment 使用的window中的document当中的createDocumentFragment

        // 1.createDocumentFragment()方法，是用来创建一个虚拟的节点对象，或者说，是用来创建文档碎片节点。它可以包含各种类型的节点，在创建之初是空的。
        // 2.DocumentFragment节点不属于文档树，继承的parentNode属性总是null。它有一个很实用的特点，当请求把一个DocumentFragment节点插入文档树时，插入的不是DocumentFragment自身，而是它的所有子孙节点，即插入的是括号里的节点。这个特性使得DocumentFragment成了占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。 
        // 另外，当需要添加多个dom元素时，如果先将这些元素添加到DocumentFragment中，再统一将DocumentFragment添加到页面，会减少页面渲染dom的次数，效率会明显提升。

        // 体现出以下几点：
        // 1.虚拟的节点对象，可包含各类型的节点，节点的各种属性和方法
        // 2.使用fragment进行节点的插入时，不是自身而是它的子元素
        // 3.将子元素统一都插入到页面，减少DOM操作，减少重排 重绘 回流，效率会明显提升
    </script>
</body>

</html>